<template>
    <span v-if="tip != ''">
        <a-tooltip placement="topLeft">
            <template #title>
                <span>{{ tip }}</span>
            </template>
            <a-range-picker :value="[$Date(value[0]), $Date(value[1])]" :presets="presets" @change="handleOk" :format="format" value-format="YYYY-MM-DD" style="width: 100%;" />
        </a-tooltip>
    </span>
    <span v-else>
        <a-range-picker :value="[$Date(value[0]), $Date(value[1])]" :presets="presets" @change="handleOk" :format="format" value-format="YYYY-MM-DD" style="width: 100%;" />
    </span>
</template>


<script setup lang="ts">
    import { $Date, $DateTimeStamp } from '@/tool/function';
    import dayjs from 'dayjs';
    import { ref } from 'vue';
    const emit = defineEmits(['change'])
    defineProps<{
        tip?: string
        placeholder?: string
        format?: string
        value: number[]
    }>()
    const handleOk= (e: number[]) => {
        emit("change", [$DateTimeStamp(e[0]), $DateTimeStamp(e[1])])
    }
    const presets = ref([
        { 
            label: "今天",
            value: [dayjs().startOf('day'), dayjs().startOf('d').add(1, 'd')]
        },
        { 
            label: "昨天",
            value: [dayjs().startOf('day').add(-1,'d'), dayjs().startOf('d')]
        },
        { 
            label: "过去7天",
            value: [dayjs().startOf('day').add(-7,'d'), dayjs().startOf('d')]
        },
        { 
            label: "过去30天",
            value: [dayjs().startOf('day').add(-30,'d'), dayjs().startOf('d')]
        },
        { 
            label: "这周",
            value: [dayjs().startOf("week"), dayjs().startOf("w").add(7, 'd')]
        },
        { 
            label: "上周", 
            value: [dayjs().startOf("week").add(-1,'w'), dayjs().startOf("w")]
        },
        { 
            label: "这个月", 
            value: [dayjs().startOf("month"), dayjs().endOf("M").add(1, 'millisecond')]
        },
        { 
            label: "上个月",
            value: [dayjs().startOf("month").add(-1, 'M'), dayjs().startOf("month")]
        },
    ]);
</script>
